<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="../plugins/elementui/index.css"/>
        <script src="js/vue.js"></script>
        <script src="js/index.js"></script>
        <script src=js/axios-0.18.0.js"></script>
        <script src="js/jquery.min.js"></script>
    </head>
</head>
<body>
<div id="app">

    <input type="text">
    <!-- v-bind 简写为 :-->
    <input type="button" @click="send()" v-bind:value="message" id="btn"  >
</div>

<!--js 和 jquery 的区别-->

<!--  var js=document.getElementById("btn")  -->
<!--  var jquery=$("#btn")       -->

<!--转换-->
<!-- js => jquery >   $(js对象)    -->
<!--jquery =>js  jquery.get(0) 或者 jquery[0]        -->

<script>



    new Vue({
        el: "#app",
        data: {
            message: "重新获取",
            number:3,
        },
        methods: {
            send() {

                document.getElementById("btn").disabled=true;
                //设置属性 不可点击按钮
               /* $("#btn").attr("disabled",true);*/
                //window的定时器
                var time = window.setInterval(() => {
                    if (this.number > 0) {
                        this.message = (this.number--) + "秒后,重新获取";
                    } else {
                        this.message = "重新获取";
                        this.number = 3;
                        window.clearInterval(time);
                        //可点击按钮
                      /*  $("#btn").attr("disabled",false);*/
                        document.getElementById("btn").disabled=false;
                    }
                },1000);

            }
        }

    });


</script>

</body>
</html>